 <# 
 	include("/include/header.html",{}){}
  #>
<div>
	<h2>${obj.name}</h2>
</div>

<div class="col-sm-12">
	<div>
		<a data-pjax  href="${base}/beetl/table/${isEmpty(num)?1:num}/">点击加载数据</a>
	</div>
	<!-- 需要填充的容器 -->
	<div id="pjax-container">
	</div>
</div>

</body>
<script>


/**
 * 1.怎么使用pjax?
		本例中，前端使用jquery.pjax插件请求，后端解析Header头部是不是pjax请求，再来选择跳转地址
   2.pjax能解决一些什么问题?
		1.本项目嵌套模板太多层，后端逻辑复杂,使用pjax相当于iframe的局部加载，而模板是全加载
		2.pjax请求解决了iframe嵌套的问题，同时也解决页面性能问题 
       注意：需要调式后端代码需加上timeout超时时间，以免加载2次(因为实际上是加载一次，后端打开断点调式，就会触发timeout超时了，才会再次发起请求加载重定向地址) 
 *  
 */
	//1.点击a链接加载
	$(document).pjax('a[data-pjax]','#pjax-container',{timeout:6000})
	$("a[data-pjax]").click(); //自动执行事件
	
	
	//url方式请求
	/* $.pjax({
		url : "${base}/beetl/table",
		container : '#pjax-container',
		timeout:6000
	}); */
	
	//执行pjax开始
	$(document).on('pjax:send', function() {
		layer.load(1, {
		  	shade: [0.1,'#fff'] //0.1透明度的白色背景
		});
	});

	//执行pjax结束
	$(document).on('pjax:complete', function() {
		layer.closeAll();
	});
	

	

	
	
</script>
</html>